<template>
  <div class="publish-resource">
    <div class="resource-bar">
      <a href="javascript:;" class="resource-bar-item" :class="{ 'is-disabled': !item.canUse, 'is-choose': item.id === currentResource }" v-for="item in myResources" :key="item.id" @click="handleChooseResource(item)">
        <div class="resource-bar-icon">
          <i class="iconfont" v-html="item.icon"></i>
        </div>
        <span>{{ item.name }}</span>
      </a>
    </div>
    <Transition name="window">
      <div class="resource-window" v-show="currentResource !== 0">
        <a href="javascript:;" class="close-window-btn" @click="handleCloseWindow">
          <i class="iconfont">&#xe8e7;</i>
        </a>
        <div class="import-temps-content" v-if="currentResource == 1">
          <div class="header-search">
            <input type="text" v-model="templateQuery.name" placeholder="请输入需要查找的关键词" @keydown.enter="searchTemplates" />
            <a href="javascript:;" @click="searchTemplates">
              <i class="iconfont">&#xe643;</i>
            </a>
          </div>
          <div class="header-class">
            <i class="iconfont"></i>
            <a href="javascript:;" @click="chooseClass(0)" :class="{ active: templateQuery.classes === 0 }"> 全部 </a>
            <a href="javascript:;" v-for="item in classList" :class="{ active: templateQuery.classes === item.id }" :key="item.id" @click="chooseClass(item.id)">{{ item.name }}</a>
            <i class="iconfont"></i>
          </div>
          <div class="inner-temps-content" v-loading="tempLoading">
            <el-scrollbar>
              <div class="scroll-temps-content" v-infinite-scroll="loadTemp" :infinite-scroll-immediate="false">
                <div class="temps-item" v-for="item in tempList" :key="item.id" @click="handleUse(item.content)">
                  <div class="temps-box">
                    <img :src="item.thumb" alt="" />
                  </div>
                  <p class="temps-name">
                    {{ item.name }}
                  </p>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="import-style-content" v-if="currentResource == 6">
          <!-- 样式区颜色 -->
          <div class="style-color-palette">
            <div class="color-picker">
              <color-picker class="vue3-color-picker" v-model:pureColor="allStyle['color']" format="hex6" shape="circle" useType="both" v-model:gradientColor="allStyle['color']" />
            </div>
            <div class="palette_name">主题色</div>
            <div class="palette_clear">清除</div>
          </div>
          <div class="header-search">
            <input type="text" v-model="styleQuery.name" placeholder="请输入需要查找的关键词" @keydown.enter="searchStyle" />
            <a href="javascript:;" @click="searchStyle">
              <i class="iconfont">&#xe643;</i>
            </a>
          </div>
          <div class="header-class">
            <i class="iconfont"></i>
            <a href="javascript:;" @click="chooseStyleClass(0)" :class="{ active: styleQuery.classes === 0 }"> 全部 </a>
            <a href="javascript:;" v-for="item in styleClassList" :class="{ active: styleQuery.classes === item.id }" :key="item.id" @click="chooseStyleClass(item.id)">{{ item.name }}</a>
            <i class="iconfont"></i>
          </div>
          <div class="inner-style-content" v-loading="styleLoading">
            <el-scrollbar>
              <div class="scroll-style-content" v-infinite-scroll="loadStyle" :infinite-scroll-immediate="false">
                <div class="style-item" v-for="item in styleList" :key="item.id" @click="handleUse(item.content)">
                  <div class="style-box" v-html="item.content"></div>
                  <p class="style-name">
                    {{ item.name }}
                  </p>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue"
import { getTemplateList } from "@/api/contentTemplate"
import { ColorPicker } from "vue3-colorpicker"
import "vue3-colorpicker/style.css"

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(["handleUse"])
// 资源列表
const myResources = reactive([
  {
    id: 6,
    icon: "&#xe632;",
    name: "样式",
    canUse: true,
  },
  {
    id: 1,
    icon: "&#xe62e;",
    name: "模板",
    canUse: true,
  }
])
const currentResource = ref(0)
watch(() => props.disabled, (newVal) => {
  if(newVal){
    myResources.forEach(item => item.canUse = false)
  }
},{ deep: true, immediate: true })
const handleChooseResource = (item) => {
  if (!item.canUse) return
  if (item.id === currentResource.value) {
    currentResource.value = 0
  } else {
    currentResource.value = item.id
    switch (item.id) {
      case 1:
        // 获取模板
        Object.assign(templateQuery, defaultTemplateQuery)
        getTemplateList(templateQuery).then((res) => {
          tempLoading.value = false
          templateQuery.total = res.data.total
          tempList.value = res.data.list
        })
        break
      case 6:
        // 获取样式
        Object.assign(styleQuery, defaultStyleQuery)
        getTemplateList(styleQuery).then((res) => {
          styleLoading.value = false
          styleQuery.total = res.data.total
          styleList.value = res.data.list
        })
    }
  }
}
/***************************模板********************************/
const tempList = ref([])
const tempLoading = ref(false)
const classList = ref([
  { id: 1, name: "图片拼图" },
  { id: 2, name: "H5模板" },
  { id: 3, name: "排版表" },
  { id: 4, name: "公文模板" },
])
const defaultTemplateQuery = {
  total: 0,
  currentPage: 1,
  pageSize: 10,
  classes: 0,
  name: "",
  type: 1
}
const templateQuery = reactive(Object.assign({}, defaultTemplateQuery))
const searchTemplates = () => {
  templateQuery.currentPage = 1
  tempLoading.value = true
  getTemplateList(templateQuery).then((res) => {
    tempLoading.value = false
    templateQuery.total = res.data.total
    tempList.value = res.data.list
  })
}
// 触底加载
const loadTemp = () => {
  if (tempList.value.length < templateQuery.total) {
    templateQuery.currentPage += 1
    getTemplateList(templateQuery).then((res) => {
      tempList.value.push(...res.data.list)
    })
  }
}
// 切换模板分类
const chooseClass = (id) => {
  Object.assign(templateQuery, defaultTemplateQuery)
  templateQuery.classes = id
  searchTemplates()
}
/***************************样式********************************/
const styleClassList = ref([
  { id: 1, name: "标题" },
  { id: 2, name: "正文" },
  { id: 3, name: "图文" },
  { id: 4, name: "引导" },
  { id: 5, name: "布局" },
])
const defaultStyleQuery = {
  total: 0,
  currentPage: 1,
  pageSize: 10,
  classes: 0,
  name: "",
  type: 2
}
const styleQuery = reactive(Object.assign({}, defaultStyleQuery))
const styleList = ref([])
const styleLoading = ref(false)
const searchStyle = () => {
  styleQuery.currentPage = 1
  styleLoading.value = true
  getTemplateList(styleQuery).then((res) => {
    styleLoading.value = false
    styleQuery.total = res.data.total
    styleList.value = res.data.list
  })
}
const loadStyle = () => {
  if (styleList.value.length < styleQuery.total) {
    styleQuery.currentPage += 1
    getTemplateList(styleQuery).then((res) => {
      styleList.value.push(...res.data.list)
    })
  }
}
const chooseStyleClass = (id) => {
  styleList.value = []
  Object.assign(styleQuery, defaultStyleQuery)
  styleQuery.classes = id
  searchStyle()
}

const allStyle = reactive({
  color: "transparent",
})

// 插入样式或模板
const handleUse = (content) => {
  emits('handleUse', content)
}
// 关闭面板
const handleCloseWindow = () => {
  currentResource.value = 0
}
</script>

<style lang="scss" scoped>
.publish-resource {
  display: flex;
  height: 100%;
  .resource-bar {
    width: 60px;
    box-sizing: border-box;
    border-right: 1px solid #dcdfe6;
    height: 100%;
    background-color: $white;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    a.resource-bar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;
      color: #444;
      .resource-bar-icon {
        height: 40px;
        width: 40px;
        margin-bottom: 10px;
        background-color: #f0f2f7;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        i {
          font-size: 20px;
          font-weight: bold;
        }
      }
      span {
        font-size: 12px;
      }
    }
    a.resource-bar-item.is-disabled {
      color: #aaaaaa;
      cursor: not-allowed;
    }
    a.resource-bar-item.is-choose {
      color: $mainColor;
      .resource-bar-icon {
        background-color: var(--el-color-primary-light-8);
      }
    }
  }
  .resource-window {
    width: 370px;
    height: 100%;
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
    background-color: $white;
    overflow: hidden;
    position: relative;
    .close-window-btn {
      position: absolute;
      i {
        font-size: 20px;
      }
      right: 15px;
      top: 15px;
    }
    .import-temps-content,
    .import-style-content {
      padding-top: 30px;
      width: 370px;
      box-sizing: border-box;
      height: 100%;
      .header-search {
        height: 40px;
        box-sizing: border-box;
        margin: 10px 20px 20px;
        border-bottom: 1px solid #dcdfe6;
        display: flex;
        align-items: center;
        input {
          border: none;
          outline: none;
          flex: 1;
        }
      }
      .header-class {
        display: flex;
        height: 52px;
        padding: 0 20px;
        justify-content: space-around;
        a {
          display: block;
          height: 32px;
          line-height: 32px;
          padding: 0 5px;
          border-radius: 32px;
          font-size: 14px;
        }
        a.active {
          color: #fff;
          background-color: $mainColor;
        }
      }
      .inner-temps-content {
        height: calc(100% - 110px);
        .scroll-temps-content {
          padding: 0 20px;
          display: flex;
          flex-direction: column;
          .temps-item {
            width: 100%;
            margin-bottom: 20px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px dashed rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.2s;
            .temps-box {
              width: 100%;
              border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
              & > img {
                width: 100%;
              }
            }
            .temps-name {
              line-height: 30px;
              text-align: center;
            }
            &:hover {
              border-color: $mainColor;
              .temps-box {
                border-color: $mainColor;
              }
            }
          }
        }
      }
    }
    .import-style-content {
      /* position: relative; */
      .style-color-palette {
        text-align: center;
        font-size: 12px;
        position: absolute;
        top: 0;
        right: -60px;
        z-index: 10;
        background: #fff;
        width: 60px;
        padding: 5px 0;
      }
      .header-class {
        a {
          padding: 0 5px;
          font-size: 14px;
        }
      }
      .inner-style-content {
        height: calc(100% - 110px);
        .scroll-style-content {
          padding: 0 20px;
          display: flex;
          flex-direction: column;
          .style-item {
            width: 100%;
            margin-bottom: 20px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px dashed rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.2s;
            .style-box {
              width: 100%;
              border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
            }
            .style-name {
              line-height: 30px;
              text-align: center;
            }
            &:hover {
              border-color: $mainColor;
              .style-box {
                border-color: $mainColor;
              }
            }
          }
        }
      }
    }
  }
}
.window-enter-to,
.window-leave-from {
  max-width: 370px;
}
.window-enter-active,
.window-leave-active {
  transition: all 0.8s;
}
.window-enter-from,
.window-leave-to {
  max-width: 0;
}
</style>
